<template>
    <div class="amap-example">
        <h2>高德地图组件示例</h2>

        <!-- 基础用法 -->
        <div class="example-section">
            <h3>基础用法</h3>
            <AMapComponent :api-key="mapConfig.apiKey" :width="'100%'" :height="'400px'"
                :center="[116.397428, 39.90923]" :zoom="10" :initial-district="'庆云县'" @district-click="onDistrictClick"
                @map-ready="onMapReady" />
        </div>

        <!-- 自定义样式 -->
        <!-- <div class="example-section">
            <h3>自定义样式</h3>
            <AMapComponent :api-key="mapConfig.apiKey" :width="'100%'" :height="'400px'"
                :center="[121.473701, 31.230416]" :zoom="11" :initial-district="'上海市'"
                :selected-style="customSelectedStyle" :unselected-style="customUnselectedStyle" :enable-mask="true"
                :show-roads="true" @district-click="onDistrictClick" />
        </div> -->

        <!-- 使用Hook的方式 -->
        <!-- <div class="example-section">
            <h3>使用 Composition API Hook</h3>
            <div class="hook-example">
                <div class="controls">
                    <input v-model="searchKeyword" placeholder="输入省市区名称" @keyup.enter="searchDistrict" />
                    <button @click="searchDistrict">搜索</button>
                    <button @click="clearDistricts">清除</button>
                </div>

                <div ref="mapContainer" class="map-container" style="width: 100%; height: 400px;"></div>

                <div v-if="mapState.currentDistrict" class="district-info">
                    <h4>当前区域信息</h4>
                    <p><strong>名称:</strong> {{ mapState.currentDistrict.name }}</p>
                    <p><strong>代码:</strong> {{ mapState.currentDistrict.adcode }}</p>
                    <p><strong>级别:</strong> {{ mapState.currentDistrict.level }}</p>
                </div>
            </div>
        </div> -->

        <!-- 事件日志 -->
        <!-- <div class="example-section">
            <h3>事件日志</h3>
            <div class="event-log">
                <div v-for="(log, index) in eventLogs" :key="index" class="log-item">
                    <span class="log-time">{{ log.time }}</span>
                    <span class="log-event">{{ log.event }}</span>
                    <span class="log-data">{{ log.data }}</span>
                </div>
            </div>
        </div> -->
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import AMapComponent from './AMapComponent.vue'
import { useAMap } from './useAMap'
import type { DistrictData } from './types'

// 地图配置
const mapConfig = {
    apiKey: 'e6072f86d2d66d78671eaa4542006354', // 请替换为你的高德地图API密钥
    version: '2.0'
}

// 自定义样式
const customSelectedStyle = {
    strokeColor: '#ff6b6b',
    strokeWeight: 3,
    strokeOpacity: 1,
    fillColor: '#ff6b6b',
    fillOpacity: 0.3
}

const customUnselectedStyle = {
    strokeColor: '#95a5a6',
    strokeWeight: 1,
    strokeOpacity: 0.6,
    fillColor: '#ecf0f1',
    fillOpacity: 0.1
}

// 事件日志
const eventLogs = ref<Array<{ time: string; event: string; data: string }>>([])

// 添加日志
const addLog = (event: string, data: any) => {
    eventLogs.value.unshift({
        time: new Date().toLocaleTimeString(),
        event,
        data: typeof data === 'object' ? JSON.stringify(data, null, 2) : String(data)
    })

    // 限制日志数量
    if (eventLogs.value.length > 10) {
        eventLogs.value = eventLogs.value.slice(0, 10)
    }
}

// 事件处理
const onDistrictClick = (district: DistrictData) => {
    addLog('district-click', {
        name: district.name,
        adcode: district.adcode,
        level: district.level
    })
}

const onMapReady = (map: any) => {
    addLog('map-ready', '地图初始化完成')
}

// Hook 示例
const searchKeyword = ref('')

const {
    mapContainer,
    isLoading,
    error,
    mapState,
    searchAndShowDistrict,
    clearDistrictPolygons
} = useAMap({
    mapConfig: {
        key: mapConfig.apiKey,
        version: mapConfig.version
    },
    mapOptions: {
        center: [113.264434, 23.129162], // 广州
        zoom: 10
    },
    districtConfig: {
        level: 'city',
        keyword: '',
        subdistrict: 1,
        extensions: 'all'
    },
    autoInit: false // 手动初始化
})

// Hook 方法
const searchDistrict = async () => {
    if (!searchKeyword.value.trim()) return

    await searchAndShowDistrict(searchKeyword.value.trim())
    addLog('search-district', searchKeyword.value)
}

const clearDistricts = () => {
    clearDistrictPolygons()
    addLog('clear-districts', '清除所有区域')
}

// 组件挂载后初始化Hook示例的地图
onMounted(async () => {
    // 延迟初始化，确保容器已渲染
    setTimeout(async () => {
        if (mapContainer.value) {
            // 这里可以手动初始化地图
            // await initMap()
        }
    }, 100)
})
</script>

<style scoped>
.amap-example {
    width: 100%;
    padding: 20px;
    /* max-width: 1200px; */
    margin: 0 auto;
}

.example-section {
    margin-bottom: 40px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 20px;
}

.example-section h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
    border-bottom: 2px solid #0078ff;
    padding-bottom: 8px;
}

.hook-example {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.controls {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.controls input {
    flex: 1;
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    font-size: 14px;
}

.controls button {
    padding: 8px 16px;
    background: #0078ff;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
}

.controls button:hover {
    background: #0056cc;
}

.map-container {
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    overflow: hidden;
}

.district-info {
    background: #f8f9fa;
    padding: 16px;
    border-radius: 6px;
    border-left: 4px solid #0078ff;
}

.district-info h4 {
    margin: 0 0 12px 0;
    color: #333;
}

.district-info p {
    margin: 6px 0;
    color: #666;
}

.event-log {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 16px;
    max-height: 300px;
    overflow-y: auto;
}

.log-item {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #e8e8e8;
    font-family: 'Courier New', monospace;
    font-size: 12px;
}

.log-item:last-child {
    border-bottom: none;
}

.log-time {
    color: #666;
    min-width: 80px;
}

.log-event {
    color: #0078ff;
    font-weight: bold;
    min-width: 120px;
}

.log-data {
    color: #333;
    flex: 1;
    word-break: break-all;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .amap-example {
        padding: 10px;
    }

    .example-section {
        padding: 15px;
    }

    .controls {
        flex-direction: column;
        align-items: stretch;
    }

    .controls input {
        min-width: auto;
    }

    .log-item {
        flex-direction: column;
        gap: 4px;
    }

    .log-time,
    .log-event {
        min-width: auto;
    }
}
</style>